<template>
  <div>
    <Select v-model="model1" size="large" style="width: 300px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Select v-model="model1" style="width: 300px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Select v-model="model1" size="small" style="width: 300px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Select v-model="model1" disabled size="small" style="width: 300px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Select v-model="model1" clearable size="small" style="width: 300px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Select v-model="model8" clearable size="small" style="width: 300px">
      <Option-group label="热门城市">
        <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Option-group>
      <Option-group label="其它城市">
        <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Option-group>
    </Select>

    <h1 @click="multiSelectedArr">多选</h1>
    <Select v-model="model9" multiple size="small" style="width: 300px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <h1>搜索</h1>
    <Row>
      <Col span="12">
        <Select v-model="model9" filterable>
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Col>
      <Col span="12">
        <Select v-model="model9" filterable multiple>
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityList: [
        {
            value: 'beijing',
            label: '北京市'
        },
        {
            value: 'shanghai',
            label: '上海市'
        },
        {
            value: 'shenzhen',
            label: '深圳市'
        },
        {
            value: 'hangzhou',
            label: '杭州市'
        },
        {
            value: 'nanjing',
            label: '南京市'
        },
        {
            value: 'chongqing',
            label: '重庆市'
        }
      ],
      cityList1: [
        {
            value: 'beijing',
            label: '北京市'
        },
        {
            value: 'shanghai',
            label: '上海市'
        },
        {
            value: 'shenzhen',
            label: '深圳市'
        }
      ],
      cityList2: [
        {
            value: 'hangzhou',
            label: '杭州市'
        },
        {
            value: 'nanjing',
            label: '南京市'
        },
        {
            value: 'chongqing',
            label: '重庆市'
        }
      ],
      model1: '',
      model8: '',
      model9: []
    }
  },
  methods : {
    multiSelectedArr () {
      console.log(this.model9);
    }
  }
}
</script>

<style>

</style>